<template>
	<div>
        <div class="search-box">
            <el-select class="mr10" v-model="query.project_id" multiple filterable placeholder="项目编号">
                <el-option
                    v-for="project_id in projectList"
                    :key="project_id"
                    :label="project_id"
                    :value="project_id">
                </el-option> 
            </el-select>
            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			<el-button type="success" :icon="Edit" @click="handleEdit()">样品领用</el-button>
			<slot name="s1"></slot>
		</div>
        <el-table ref="multipleTable" :data="tableSplit()" border header-cell-class-name="table-header" 
        @selection-change="handleSelection">
            <el-table-column prop="id" label="ID" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="project_id" label="项目编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sample_id" label="样品编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sample_name" label="样品名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="lot_number" label="批号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="size" label="原始规格" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="current_amount" label="原始库存量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="disp_amount" label="分装总库存" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="disp_size" label="分装规格" align="center" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="arrive_time" label="到样日期" align="center" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="instock_time" label="入库日期" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="样品状态" align="center" show-overflow-tooltip>
				<template #default="scope">
					<el-tag v-if="scope.row.status===0" type="info">未审核</el-tag>
					<el-tag v-if="scope.row.status===1" type="warning">暂存</el-tag>
					<el-tag v-if="scope.row.status===2" type="primary">待检</el-tag>
					<el-tag v-if="scope.row.status===3" type="success">在检</el-tag>
					<el-tag v-if="scope.row.status===4" type="danger">检毕</el-tag>
					<el-tag v-if="scope.row.status===5" type="danger">销毁</el-tag>
					<el-tag v-if="scope.row.status===6" type="warning">返回</el-tag>
				</template>
			</el-table-column>
			<el-table-column type="selection"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout=" prev, pager, next,jumper,total"
                :current-page="state.pageIndex"
                :page-size="state.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
		<el-dialog
			v-model="receiptVisible" 
			title="样品领用单"
			width="1450px" 
			destroy-on-close
			:close-on-click-modal="false"
			@close="closeSampledialog"
		>
			<SampleReceipt :form="multiple_selection" :closeSampledialog="closeSampledialog"/>
		</el-dialog>
		<slot name="s2"></slot>
	</div>
</template>

<script setup lang="ts">
import { pa } from 'element-plus/es/locale';
import { ref,reactive, onMounted, onActivated } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Search, Edit } from '@element-plus/icons-vue'
import useProject from '../../../hooks/Project/useProject'
import useSample from '../../../hooks/Sample/useSample'
import useUtils from '../../../hooks/useUtils'
import SampleReceipt from '../../sample/sample_receipt.vue'
const { getSampleProject,queryProject } = useProject()
const { getSample } = useSample()
/* 项目检索 */
const pageTotal = ref(0);
const query = reactive({
	project_id: '',
	limit:20,
	pageIndex: 1,
	pageSize: 20,
	pageTotal:pageTotal
});
/* 检索信息方法 */
const handleSearch = () => {
	if(query.project_id.length === 0){
		ElMessage({
			type: 'error',
			message: `请选中至少一个项目！`,
		})
	}else{
		queryProject(query).then( res=>{
			tableData.value=res.data
			pageTotal.value=res.data.length
		})
	}
}
/* 创建表格模板 */                                                                                                                                                                         
interface TableItem { 
	id: number;
	client_id: string;
	sample_id: string;
	sample_name: string;
	lot_number: string;
	size: string;
	sample_amount: number;
	current_amount: number;
	disp_amount: number;
	disp_size: string;
	arrive_time: string;
	instock_time: string;
	create_time: string;
	status: number;
}
const tableData = ref<TableItem[]>([]);
const state = reactive({
	page:1,
	limit:50,
	pageIndex: 1,
	pageSize: 50,
	total:pageTotal
})
/* 数据分页 */
const tableSplit = () => {
	return(tableData.value.filter(
		(item,index) => 
		index < state.page * state.limit && index >= state.limit*(state.page - 1) 
	))
}
const handlePageChange = (val: number) => {
	state.pageIndex = val;
	state.page = val;
};
/* 获取表格多选结果 */
let idx: number = -1;
let multiple_selection = reactive([])
const handleSelection = (val:any) => {
	if(val.length === 0){
	} else {
		multiple_selection = val
	}
}
const receiptVisible=ref(false)
const handleEdit = () => {
	if(multiple_selection.length === 0){
		ElMessage.error("至少选择一个样品！")
	}else{
		for(let item of multiple_selection){
			if (item.status === 2 || item.status === 3){
				receiptVisible.value=true
			}else{
				multiple_selection.splice(1,item.id)
				ElMessage.error("请选择待检/在检的样品！")
			}
		}
	
	}
}
const closeSampledialog = () => {
	receiptVisible.value=false
}

/* 传递多选值给父组件 */
// const emit = defineEmits(["getValue"])
// const transValue = <T>(val:T) => {
// 	emit("getValue",val)
// }

const updateData = () => {
	tableData.value = []
}

/* 去除表格重复 */
const { arrRemoveDup } = useUtils()
/* 获取项目编号 */
const projectList = ref([])
onMounted(() => {
	getSampleProject().then( res => {
		for(let item of res.data.samples){
			projectList.value.push(item["project_id"])
		}
		projectList.value=arrRemoveDup(projectList.value)
	})
})
</script>

<style scoped>
.search-box {
	margin-bottom: 20px;
	float:left
}

.mr10 {
	margin-right: 10px;
} 
.el-select {
	width: 800px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}

</style>
